<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>北极光之夜</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            main {
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgb(30, 49, 71);
            }

            .txt {
                font-family: 'fangsong';
                font-weight: 900;
                font-size: 80px;
                letter-spacing: 3px;
                fill: transparent;
                stroke: url('#yanse');/* 边框颜色 */
                stroke-width: 1.5px;/* 边框宽度 */
                stroke-dasharray: 625;/* 定义虚线 */
                stroke-dashoffset: 625;/* 偏移 */
                animation: draw 5s linear infinite;
            }

            @keyframes draw {
                0%,
                5% {
                    stroke-dasharray: 625;
                    stroke-dashoffset: 625;
                }
                40%,
                60% {
                    stroke-dasharray: 625;
                    stroke-dashoffset: 0;
                }
                100% {
                    stroke-dasharray: 625;
                    stroke-dashoffset: 625;
                }
            }
        </style>
    </head>

    <body>
        <!-- 定义SVG的渐变颜色标签与动画标签 -->
        <main>
            <svg width="500" height="200">
                <defs>
                    <!-- 定义一种渐变颜色 -->
                    <linearGradient id="yanse">
                        <stop offset="33%" stop-color="#00BFFF">
                            <animate attributeName="stop-color" from="#00BFFF" to="#FF8C00" dur="5s" repeatCount="indefinite"></animate>
                        </stop>
                        <stop offset="66%" stop-color="#00FFFF"></stop>
                        <stop offset="100%" stop-color="#00FA9A">
                            <animate attributeName="stop-color" from="#00FA9AF" to="#FF00FF" dur="5s" repeatCount="indefinite"></animate><!-- 控制其颜色变化 -->
                        </stop>
                    </linearGradient>
                </defs>
                <text x="30" y="120" class="txt">北极光之夜</text>
            </svg>
        </main>
    </body>
</html>
